هم‌ترازی CSS Subgrid: تسلط بر وراثت طرح‌بندی گرید تودرتو

CSS Subgrid یک ویژگی قدرتمند است که قابلیت‌های طرح‌بندی CSS Grid را گسترش می‌دهد و به شما امکان می‌دهد ساختارهای گرید تودرتوی پیچیده‌تر و انعطاف‌پذیرتری ایجاد کنید. این ویژگی به یک آیتم گرید اجازه می‌دهد تا تعاریف ترک (track) گرید والد خود را به ارث ببرد و کنترل بی‌نظیری بر هم‌ترازی و فاصله‌گذاری در طرح‌بندی‌های تودرتو فراهم کند. این مقاله به بررسی جزئیات CSS Subgrid می‌پردازد و مزایا، موارد استفاده و پیاده‌سازی عملی آن را با مثال‌های کد بررسی می‌کند. ما همه چیز را از مفاهیم پایه تا تکنیک‌های پیشرفته پوشش خواهیم داد تا شما را قادر سازیم از Subgrid برای ایجاد طراحی‌های پیچیده و واکنش‌گرا بهره‌مند شوید.

درک طرح‌بندی CSS Grid: پایه‌ای برای Subgrid

قبل از پرداختن به Subgrid، داشتن درک قوی از طرح‌بندی CSS Grid ضروری است. Grid Layout یک سیستم طرح‌بندی دو بعدی است که به شما امکان می‌دهد یک کانتینر را به سطرها و ستون‌ها تقسیم کرده و آیتم‌ها را درون سلول‌های گرید حاصل قرار دهید. این سیستم ابزارهای قدرتمندی برای کنترل اندازه، موقعیت و هم‌ترازی عناصر ارائه می‌دهد.

در اینجا یک مثال ساده از یک کانتینر CSS Grid آورده شده است:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}
            

              
                Copy
              
            
          

در این مثال، ما یک کانتینر گرید با سه ستون با عرض برابر (1fr) و دو سطر با ارتفاع خودکار ایجاد کرده‌ایم. خاصیت gap فاصله‌گذاری بین آیتم‌های گرید را اضافه می‌کند.

معرفی CSS Subgrid: گسترش قابلیت‌های Grid

Subgrid بر پایه CSS Grid ساخته شده است و به یک گرید تودرتو اجازه می‌دهد تا تعاریف ترک (سطرها و ستون‌ها) گرید والد خود را به ارث ببرد. این بدان معناست که شما می‌توانید عناصر درون یک گرید تودرتو را با ترک‌های گرید بیرونی هم‌تراز کنید و یک طرح‌بندی منسجم و از نظر بصری سازگار ایجاد نمایید. این ویژگی به ویژه برای طرح‌بندی‌های پیچیده‌ای که در آن‌ها عناصر باید چندین سطر یا ستون را در بر بگیرند، مفید است.

مزایای کلیدی استفاده از CSS Subgrid:

• هم‌ترازی بهبود یافته: Subgrid هم‌ترازی دقیق بین آیتم‌های گرید تودرتو و ترک‌های گرید والد را تضمین می‌کند.
• کاهش پیچیدگی: با اجازه دادن به تعریف اندازه‌ها و موقعیت‌های ترک در گرید والد و به ارث بردن آن‌ها در subgrid، طرح‌بندی‌های پیچیده را ساده می‌کند.
• واکنش‌گرایی بهبود یافته: با اجازه دادن به subgridها برای انطباق با اندازه و شکل گرید والدشان، طراحی واکنش‌گرا را تسهیل می‌کند.
• قابلیت نگهداری: با متمرکز کردن تعاریف ترک در گرید والد، قابلیت نگهداری کد را بهبود می‌بخشد.

پیاده‌سازی CSS Subgrid: یک راهنمای عملی

برای پیاده‌سازی Subgrid، باید یک آیتم گرید را به عنوان subgrid با تنظیم خصوصیات grid-template-columns و/یا grid-template-rows به مقدار subgrid اعلام کنید. این به مرورگر می‌گوید که تعاریف ترک را از گرید والد به ارث ببرد.

مثال: ایجاد یک طرح‌بندی Subgrid ساده

بیایید سناریویی را در نظر بگیریم که در آن یک طرح‌بندی گرید اصلی با سه ستون و دو سطر داریم. می‌خواهیم یک subgrid در یکی از آیتم‌های گرید ایجاد کنیم که با ستون‌های گرید اصلی هم‌تراز باشد.

            <div class="grid-container">
  <div class="grid-item item1">Item 1</div>
  <div class="grid-item item2">Item 2</div>
  <div class="grid-item item3">Item 3</div>
  <div class="grid-item item4">Item 4</div>
  <div class="grid-item item5">Item 5
    <div class="subgrid-container">
      <div class="subgrid-item">Subitem 1</div>
      <div class="subgrid-item">Subitem 2</div>
      <div class="subgrid-item">Subitem 3</div>
    </div>
  </div>
  <div class="grid-item item6">Item 6</div>
</div>
            

              
                Copy
              
            
          

حالا، بیایید CSS را اضافه کنیم:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 80%;
  margin: 20px auto;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.item5 {
  display: grid; /* Enables grid layout for this item */
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

.subgrid-item {
  background-color: #d0d0d0;
  padding: 10px;
  border: 1px solid #bbb;
}
            

              
                Copy
              
            
          

در این مثال، .subgrid-container یک subgrid است که ترک‌های ستون را از .grid-container به ارث می‌برد. ما از `grid-column: 1 / -1;` روی .subgrid-container استفاده می‌کنیم تا اطمینان حاصل شود که تمام عرض .grid-item.item5 را در بر می‌گیرد که باعث می‌شود subgrid با ستون‌های گرید والد هم‌تراز شود. آیتم‌های subgrid به طور خودکار با ستون‌های تعریف شده در گرید والد هم‌تراز خواهند شد.

اندازه‌گیری صریح ترک‌ها با خطوط گرید نام‌گذاری شده

برای طرح‌بندی‌های پیچیده‌تر، ممکن است بخواهید اندازه‌های ترک را به صراحت تعریف کرده و از خطوط گرید نام‌گذاری شده استفاده کنید. این کار کنترل و وضوح بیشتری در کد شما ایجاد می‌کند.

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-mid] 2fr [col-end];
  grid-template-rows: [row-start] auto [row-mid] auto [row-end];
  gap: 10px;
}

.subgrid-container {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent grid item */
  grid-template-columns: subgrid [col-start] [col-mid] [col-end];
  grid-template-rows: subgrid;
  gap: 5px;
  background-color: #e0e0e0;
  padding: 10px;
}

            

              
                Copy
              
            
          

در اینجا، ما خطوط گرید نام‌گذاری شده (col-start، col-mid، col-end، row-start، row-mid، row-end) را در گرید والد تعریف کرده‌ایم. subgrid این خطوط نام‌گذاری شده را به ارث می‌برد و به شما امکان می‌دهد عناصر را در داخل subgrid با استفاده از این نام‌ها موقعیت‌دهی کنید.

تکنیک‌های پیشرفته Subgrid

گسترش ترک‌ها در Subgrid

شما همچنین می‌توانید ترک‌ها را در یک subgrid گسترش دهید، درست مانند یک گرید معمولی. این به شما امکان می‌دهد عناصری ایجاد کنید که چندین سطر یا ستون را در subgrid اشغال کنند.

            .subgrid-item-span {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
            

              
                Copy
              
            
          

این باعث می‌شود عنصر دو ستون و دو سطر را در subgrid اشغال کند.

استفاده از grid-auto-flow با Subgrid

خاصیت grid-auto-flow نحوه قرارگیری آیتم‌های خودکار در گرید را کنترل می‌کند. می‌توان از آن با subgrid برای کنترل جهتی که آیتم‌ها در آن قرار می‌گیرند، استفاده کرد.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: row dense; /* Example value */
}

            

              
                Copy
              
            
          

مقدار row dense باعث می‌شود آیتم‌ها هرگونه شکاف در سطرها را پر کنند، در حالی که مقدار column dense شکاف‌ها را در ستون‌ها پر می‌کند.

مدیریت ترک‌های ضمنی در Subgrid

اگر یک آیتم subgrid خارج از ترک‌های تعریف شده صریح قرار گیرد، ترک‌های ضمنی ایجاد می‌شوند. شما می‌توانید اندازه این ترک‌های ضمنی را با استفاده از خصوصیات grid-auto-rows و grid-auto-columns کنترل کنید.

            .subgrid-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: minmax(100px, auto);
}

            

              
                Copy
              
            
          

این تضمین می‌کند که هر سطر ایجاد شده به صورت ضمنی حداقل ارتفاع ۱۰۰ پیکسل داشته باشد و به طور خودکار با اندازه محتوا تنظیم شود.

کاربردهای واقعی CSS Subgrid

CSS Subgrid به ویژه برای ایجاد طرح‌بندی‌های پیچیده در سناریوهای مختلف دنیای واقعی مفید است:

• طرح‌بندی فرم‌ها: هم‌تراز کردن برچسب‌ها و فیلدهای ورودی فرم با یک ساختار گرید منسجم. یک فرم چند زبانه را تصور کنید که طول برچسب‌های آن متفاوت است. Subgrid می‌تواند تضمین کند که فیلدهای ورودی همیشه هم‌تراز هستند، صرف نظر از طول برچسب.
• لیست محصولات: ایجاد لیست‌های محصولات جذاب از نظر بصری با هم‌ترازی منسجم تصاویر، عناوین و توضیحات. یک پلتفرم تجارت الکترونیک را در نظر بگیرید که محصولاتی از کشورهای مختلف می‌فروشد. Subgrid می‌تواند به حفظ هم‌ترازی منسجم جزئیات محصول با وجود تفاوت در طول نام یا توضیحات محصول کمک کند.
• رابط‌های کاربری داشبورد: ساخت رابط‌های کاربری داشبورد پیچیده با چندین پنل و ویجت که باید با یکدیگر هم‌تراز باشند. یک داشبورد مالی را تصور کنید که نمودارها، جداول و شاخص‌های کلیدی عملکرد را نمایش می‌دهد. Subgrid تضمین می‌کند که همه عناصر به طور کامل هم‌تراز هستند و تجربه‌ای حرفه‌ای و کاربرپسند ایجاد می‌کند.
• طرح‌بندی‌های مجله‌ای: طراحی طرح‌بندی‌های سبک مجله با مقالات، تصاویر و زیرنویس‌هایی که باید در چندین ستون هم‌تراز باشند. به عنوان مثال، یک وب‌سایت خبری می‌تواند از subgrid برای حفظ ساختار گرید منسجم در بخش‌های مختلف صفحه اصلی، صرف نظر از نوع محتوا، استفاده کند.
• نمای تقویم: پیاده‌سازی نماهای تقویم که در آن رویدادها باید با روزها و زمان‌های خاصی هم‌تراز باشند.

پشتیبانی مرورگرها از CSS Subgrid

پشتیبانی مرورگرها از CSS Subgrid به طور کلی در مرورگرهای مدرن خوب است. این ویژگی در فایرفاکس، کروم، سافاری و اج پشتیبانی می‌شود. با این حال، همیشه ایده خوبی است که آخرین جداول سازگاری مرورگرها را در وب‌سایت‌هایی مانند Can I use بررسی کنید تا از پشتیبانی برای مخاطبان هدف خود اطمینان حاصل کنید. همچنین ممکن است بخواهید از تکنیک‌های بهبود تدریجی برای ارائه یک جایگزین برای مرورگرهای قدیمی‌تر استفاده کنید.

ملاحظات دسترسی‌پذیری

هنگام استفاده از CSS Subgrid، در نظر گرفتن دسترسی‌پذیری مهم است. اطمینان حاصل کنید که طرح‌بندی برای کاربران دارای معلولیت منطقی و قابل پیمایش باشد. از عناصر HTML معنایی استفاده کنید و ویژگی‌های ARIA مناسب را برای بهبود دسترسی‌پذیری ارائه دهید. طرح‌بندی خود را با صفحه‌خوان‌ها و پیمایش با صفحه‌کلید آزمایش کنید تا هرگونه مشکل احتمالی را شناسایی و برطرف نمایید. ترتیب صحیح محتوا در سورس HTML برای کاربران صفحه‌خوان بسیار مهم است. برای انتقال اطلاعات تنها به طرح‌بندی بصری تکیه نکنید.

مقایسه CSS Subgrid با تکنیک‌های سنتی طرح‌بندی

در مقایسه با تکنیک‌های سنتی طرح‌بندی مانند float و flexbox، CSS Subgrid چندین مزیت ارائه می‌دهد:

• طرح‌بندی دو بعدی: Subgrid برای طرح‌بندی‌های دو بعدی طراحی شده است، در حالی که flexbox عمدتاً برای طرح‌بندی‌های یک بعدی است.
• کنترل هم‌ترازی: Subgrid کنترل دقیق‌تری بر هم‌ترازی بین آیتم‌های گرید تودرتو و ترک‌های گرید والد فراهم می‌کند.
• کاهش پیچیدگی: Subgrid می‌تواند طرح‌بندی‌های پیچیده را با اجازه دادن به تعریف اندازه‌ها و موقعیت‌های ترک در گرید والد و به ارث بردن آن‌ها در subgrid، ساده کند.

در حالی که flexbox برای چیدمان آیتم‌ها در یک ردیف یا ستون عالی است، Subgrid در ایجاد طرح‌بندی‌های پیچیده و دو بعدی با هم‌ترازی دقیق برتری دارد.

نکات و بهترین شیوه‌ها برای استفاده از CSS Subgrid

• با یک برنامه واضح شروع کنید: قبل از پیاده‌سازی Subgrid، طرح‌بندی خود را با دقت برنامه‌ریزی کنید و مناطقی را که Subgrid می‌تواند بیشترین سود را داشته باشد، شناسایی کنید.
• از خطوط گرید نام‌گذاری شده استفاده کنید: خطوط گرید نام‌گذاری شده می‌توانند خوانایی و قابلیت نگهداری کد شما را بهبود بخشند.
• به طور کامل تست کنید: طرح‌بندی خود را در مرورگرها و دستگاه‌های مختلف آزمایش کنید تا از سازگاری و واکنش‌گرایی اطمینان حاصل کنید.
• دسترسی‌پذیری را در نظر بگیرید: اطمینان حاصل کنید که طرح‌بندی شما برای کاربران دارای معلولیت قابل دسترسی است.
• از نام‌های کلاس معنادار استفاده کنید: از نام‌های کلاس واضح و توصیفی برای افزایش خوانایی و قابلیت نگهداری کد استفاده کنید. به عنوان مثال، به جای استفاده از نام‌های عمومی مانند `item1` یا `container`، نام‌هایی را انتخاب کنید که محتوا یا عملکرد عنصر را منعکس می‌کنند، مانند `product-image` یا `navigation-menu`. این کار درک هدف هر عنصر و اصلاح کد در آینده را آسان‌تر می‌کند.
• کد خود را مستند کنید: به CSS و HTML خود کامنت اضافه کنید تا هدف بخش‌های مختلف و نحوه کار آن‌ها با یکدیگر را توضیح دهید. این امر به ویژه برای طرح‌بندی‌های پیچیده‌ای که ممکن است درک آن‌ها در یک نگاه دشوار باشد، مفید است. کد خوب مستند شده، نگهداری و اصلاح طرح‌بندی را برای سایر توسعه‌دهندگان (یا خودتان در آینده) آسان‌تر می‌کند.

اشکال‌زدایی طرح‌بندی‌های CSS Subgrid

اشکال‌زدایی طرح‌بندی‌های CSS Subgrid گاهی می‌تواند چالش‌برانگیز باشد. در اینجا چند نکته برای کمک به شما در عیب‌یابی مشکلات رایج آورده شده است:

• از ابزارهای توسعه‌دهنده مرورگر استفاده کنید: ابزارهای توسعه‌دهنده مرورگر ویژگی‌های قدرتمندی برای بازرسی طرح‌بندی‌های CSS Grid و Subgrid ارائه می‌دهند. شما می‌توانید خطوط گرید، اندازه‌های ترک و موقعیت آیتم‌ها را به صورت بصری مشاهده کنید.
• خطاها را در کنسول بررسی کنید: به دنبال هرگونه خطا یا هشدار CSS در کنسول مرورگر باشید.
• طرح‌بندی را ساده کنید: اگر با یک طرح‌بندی پیچیده مشکل دارید، سعی کنید آن را ساده کنید تا ناحیه مشکل را جدا کنید.
• CSS خود را اعتبارسنجی کنید: از یک اعتبارسنج CSS برای بررسی خطاهای نحوی و سایر مشکلات استفاده کنید.
• استایل‌های محاسبه‌شده را بازرسی کنید: از تب "Computed" در ابزارهای توسعه‌دهنده مرورگر برای بررسی استایل‌های نهایی محاسبه شده که به هر عنصر اعمال می‌شود، از جمله استایل‌های به ارث برده شده، استفاده کنید.

نتیجه‌گیری: استقبال از قدرت CSS Subgrid

CSS Subgrid ابزاری ارزشمند برای ایجاد طرح‌بندی‌های گرید تودرتوی پیچیده و واکنش‌گرا است. با درک ویژگی‌ها و مزایای آن، می‌توانید از Subgrid برای ارتقای مهارت‌های طراحی وب خود و ساخت وب‌سایت‌های پیچیده‌تر و از نظر بصری جذاب‌تر استفاده کنید. چه در حال طراحی طرح‌بندی فرم‌ها، لیست محصولات یا رابط‌های کاربری داشبورد باشید، Subgrid انعطاف‌پذیری و کنترل مورد نیاز شما را برای ایجاد طرح‌بندی‌های بی‌نقص فراهم می‌کند. با ادامه بهبود پشتیبانی مرورگرها، Subgrid آماده است تا به بخشی ضروری از جعبه ابزار هر توسعه‌دهنده فرانت‌اند تبدیل شود.

با مثال‌های ارائه شده در این مقاله آزمایش کنید و ویژگی‌های مختلف CSS Subgrid را کاوش کنید. با تمرین، شما قادر خواهید بود بر Subgrid مسلط شوید و طرح‌بندی‌های وب خیره‌کننده‌ای ایجاد کنید که هم کاربردی و هم از نظر بصری جذاب باشند. برای ارتقای بیشتر مهارت‌ها و درک خود از این فناوری، مشارکت در پروژه‌های منبع‌بازی که از CSS Grid و Subgrid استفاده می‌کنند را در نظر بگیرید.

منابع بیشتر برای مطالعه

• مستندات وب MDN: طرح‌بندی CSS Subgrid
• ماژول طرح‌بندی CSS Grid سطح ۲
• Can I use: CSS Subgrid